<template>
  <div
    class="resource-view-2-box w-full h-full overflow-hidden box-border flex justify-start items-center flex-col"
  >
    <div class="space w-[800px] h-[calc(100%_-_64px)] overflow-hidden box-border">

      <div
        class="title w-full flex justify-between items-center p-[20px] pl-[24px] pr-[24px] overflow-hidden h-[72px] box-border"
      >
        <span>关联信息</span>
        <span></span>
      </div>
      <div class="content w-full flex-1 box-border pl-[24px] pr-[24px]">
        <a-table :columns="ColumnsView" :data="relations" :pagination="false">
          <template #index="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table>
      </div>
    </div>
    <div
      class="footer w-full h-[64px] overflow-hidden box-border flex justify-between items-center pl-[24px] pr-[24px]"
    >
      <span>
        <a-button @click="toEdit()">编辑当前版本</a-button>
      </span>
      <span>
        <a-button @click="toClose">取消</a-button>
        <a-button @click="() => {props.back ? props.back(1) : false}" class="ml-2">上一步</a-button>
        <a-button type="primary" @click="toClose" class="ml-2">关闭</a-button>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as Api from '@/api/assetManagement/assetManagement';
import * as T from '@/api/assetManagement/assetManagement_type';
import { Message } from '@arco-design/web-vue';
import type { PropType } from 'vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { ColumnsView } from '../values';

const props = defineProps({
  data: {
    type: Object as PropType<T.TResourceItem>,
    required: true
  },
  back: {
    type: Function,
  }
});

const router = useRouter();
const relations = ref<any[]>([])

function getRelations() {
  Api.GetRelation(props.data.id).then(res => {
    console.log(`[ res ]=>`, res)
    if (res.code === 200 && res.data) {
      relations.value = res.data
      return
    }
    Message.warning(res.errMsg)
  })
}

function toEdit() {
  const { id } = props.data;
  if (!id) return;
  router.push({
    name: 'resourceedit',
    params: {
      id: id
    }
  });
}

function toClose() {
  router.push({
    name: 'resource'
  });
}

onMounted(() => {
  getRelations()
});
</script>

<style lang="less" scoped>
.resource-view-1-box {
  // ..
}

.title {
  span:first-child {
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: bold;
    color: #394d73;
  }
}
.footer {
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
}
</style>
